// banner组件

import React, {useState, useEffect} from 'react';
import {Text, View, StyleSheet, Alert} from 'react-native';
import {Box, Center, Image} from 'native-base';
import Swiper from 'react-native-swiper';

const Banner = navigation => {
  const [name, setName] = useState('xxxxx');
  const Banners = () => {
    return (
      <View>
        <Image
          source={require('../../../../assets/home/back.png')}
          alt="背景"
          width={'100%'}
        />
      </View>
    );
  };

  const goDetail = () => {
    console.log(123);
    Alert.alert('你点击了按钮！');
    navigation.navigate('Shop');
    // console.log(navigation)
  };

  return (
    <View style={styles.Hbanner}>
      <Banners style={styles.img} />
      <View style={styles.Hcontext}>
        <Text onPress={goDetail} style={styles.text}>
          欢迎回来，{name}
        </Text>
        <View style={styles.content}>
          <Swiper style={styles.wrapper} showsButtons={false} autoplay={true}>
            <Image
              style={styles.images}
              source={require('../../../../assets/home/pic.png')}
              alt="搜索"
            />
            <Image
              style={styles.images}
              source={require('../../../../assets/home/pic.png')}
              alt="搜索"
            />
            <Image
              style={styles.images}
              source={require('../../../../assets/home/pic.png')}
              alt="搜索"
            />
          </Swiper>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  Hbanner: {
    position: 'relative',
    width: '100%',
  },
  img: {
    width: '100%',
    position: 'absolute',
  },
  Hcontext: {
    width: '100%',
    position: 'absolute',
    marginTop: 47.5,
    marginLeft: 15,
  },
  text: {
    color: '#fff',
    fontSize: 18,
  },
  content: {
    width: '85%',
    height: '100%',
    marginLeft: '4%',
    overflow: 'hidden',
    marginTop: 14,
    position: 'relative',
  },
  wrapper: {},
  images: {
    width: '100%',
    height: 167,
  },
});
export default Banner;
